@themecolor: #ffc000;
*, *::before, *::after {
  box-sizing: border-box;
}

// 去掉input[type=number]默认的加减号
input[type='number'] {
  -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

header {
  position: fixed;
  display: flex;
  z-index: 999;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 1.12rem;
  background: rgba(255, 255, 255, 0);
  .back, .shopping-cart, .others {
    .fa {
      line-height: .76rem;
      overflow: hidden;
      color: #3c414a;
    }
    display: inline-block;
    width: .76rem;
    height: .76rem;
    border-radius: 50%;
    text-align: center;
    line-height: .76rem;
    background-color: #fff;
  }
  .back {
    margin-left: .2rem;
    .fa {
      font-size: .66rem;
    }
  }
  .shopping-cart {
    background-color: rgba(255, 255, 255, .6);
    margin-left: 4.5rem;
    .fa {
      font-size: .45rem;
    }
  }
  .others {
    background-color: rgba(255, 255, 255, .6);
    margin-right: .2rem;
    .fa {
      font-size: .16rem;
      -webkit-transform: scale(0.6);
      display: inline-block;
      text-align: left;
    }
  }
  .others-open {
    position: absolute;
    width: .76rem;
    height: 1.87rem;
    right: 0.18rem;
    top: 1.12rem;
    opacity: 0;
    animation-duration: .2s;
    .home, .share {
      .fa {
        font-size: .45rem;
        line-height: .74rem;
        overflow: hidden;
        color: #3c414a;
      }
      display: block;
      width: .74rem;
      height: .74rem;
      border-radius: 50%;
      text-align: center;
      line-height: .74rem;
      border: .01rem solid #ccc;

    }
    .share {
      margin-top: .2rem;
    }
  }
}

/*head end*/
.carousel.carousel-slider {
  //height: 7.5rem;
  //overflow: hidden;
  .carousel-fixed-item {
    height: 1.34rem;
    font-size: .4rem;
    color: #fff;
    bottom: 0 !important;
    text-align: left;
    text-indent: .2rem;
    background-image: linear-gradient(180deg, rgba(76, 76, 76, 0) 0, rgba(19, 19, 19, 0.5) 100%);
  }
  .indicators {
    z-index: 10;
    height: 1.34rem;
    .indicator-item {
      bottom: -.54rem;
    }
  }
  .indicators .indicator-item.active {
    background-color: @themecolor;
  }
  .indicators .indicator-item {
    background-color: rgba(0, 0, 0, .15);
    img {
      height: 7.5rem;
    }
  }
}

/*carousel end*/
.pro-price {
  height: 1.74rem;
  overflow: hidden;
  border-bottom: .02rem solid #ddd;
  .rel-price {
    text-indent: .3rem;
    height: .4rem;
    margin-top: .36rem;
    font-size: .46rem;
    font-weight: 500;
    color: @themecolor;
  }
  .market-price {
    text-indent: .3rem;
    height: .3rem;
    margin-top: -.2rem;
    color: #999;
    font-size: .3rem;
    .market-dec {
      text-decoration: line-through;
    }
  }
}

/*pro-price end*/
.pro-sizeinfo {
  text-indent: .3rem;
  height: 1.03rem;
  line-height: 1.03rem;
  font-size: .36rem;
  border-bottom: .02rem solid #ddd;
  .chioce-style {
    color: #333;
    .fa {
      font-size: .4rem;
      line-height: 1.03rem;
      margin-right: .26rem;
    }
  }
  .modal.bottom-sheet {
    height: 7.32rem;
    max-height: none;
  }
  .modal {
    overflow-y: visible;
    .top-info {
      position: relative;
      height: 2.48rem;
      padding-left: 2.95rem;
      .info-name, .info-price, .info-amount {
        font-size: .32rem;
        margin: 0;
        padding: 0;
        height: .48rem;
      }
      .info-name {
        color: #333;
      }
      .info-price {
        color: @themecolor;
        margin-bottom: .24rem;
      }
      .info-amount {
        font-size: .26rem;
        color: #666;
      }
      .fa {
        color: #666;
        display: block;
        position: absolute;
        top: .24rem;
        right: .14rem;
        width: .38rem;
        height: .38rem;
        border: .02rem solid #666;
        border-radius: 50%;
        &::before {
          display: block;
          position: absolute;
          left: -.22rem;
          top: .05rem;
        }
        font-size: .22rem;
      }
    }
    .productMallOptionImage {
      position: absolute;
      left: .3rem;
      top: -.44rem;
      width: 2.82rem;
      height: 2.82rem;
      background-color: #fff;
      border: .02rem solid #ececec;
      border-radius: .06rem;
      padding: .08rem;
      .productMallOptionImageContent {
        width: 2.62rem;
        height: 2.62rem;
        border: .02rem solid #ececec;
        border-radius: .06rem;
        img {
          display: block;
          width: 100%;
          vertical-align: middle;
          max-width: 100%;
        }
      }
    }
    .info-style {
      height: 1.9rem;
      p {
        height: .42rem;
        font-size: .3rem;
      }
      .styles {
        display: block;
        width: 1.24rem;
        height: .7rem;
        color: #ceced0;
        line-height: .7rem;
        border-radius: .06rem;
        margin-left: .3rem;
        border: .02rem dashed #ceced0;
        font-size: .24rem;
      }
    }
    .info-count {
      height: 1.32rem;
      span {
        font-size: .3rem;
      }
      .count-content {
        width: 3.7rem;
        height: .95rem;
        overflow: hidden;
        float: right;
        .minus, .plus {
          display: inline-block;
          width: .92rem;
          height: .87rem;
          line-height: .87rem;
          font-size: .3rem;
          border: .02rem solid rgb(226, 226, 226);
          border-radius: .06rem;
          .fa {
            display: block;
            width: .92rem;
            height: .87rem;
            line-height: .87rem;
          }
        }
        .minus {
          .fa {
            color: rgb(226, 226, 226);
          }
        }
        #productNum {
          display: inline-block;
          outline: none;
          width: 1.125rem;
          height: .84rem;
          font-size: .4rem;
          text-align: center;
          border: .02rem solid rgb(198, 198, 198);
        }
        .plus {
          border: .02rem solid rgb(198, 198, 198);
        }
      }
    }
    .footer-info {
      overflow: hidden;
      padding: 0 .2rem 0 .2rem;
      height: 1.5rem;
      border-top: .02rem solid rgb(226, 226, 226);
      .add-to-cart, .buy-now {
        display: inline-block;
        width: 3.4rem;
        height: 1rem;
        text-align: center;
        line-height: 1rem;
        font-size: .4rem;
        margin-top: .16rem;
      }
      .add-to-cart {
        float: left;
        color: @themecolor;
        border: .04rem solid @themecolor;
      }
      .buy-now {
        float: right;
        color: #fff;
        background: @themecolor;
      }
    }
  }
}

/*pro-sizeinfo end*/
.product-tab {
  height: 1.1rem;
  font-size: .35rem;
  border-bottom: .02rem solid #ddd;
  .active {
    color: @themecolor !important;
    border-bottom: .04rem solid @themecolor;
  }
  .pro-details, .pro-parameter, .pro-comment {
    color: #000;
    display: inline-block;
    width: 2.4rem;
    height: 1.03rem;
    text-align: center;
    line-height: 1.03rem;
  }
  .detail-tpl {
    height: 5.25rem;
    animation-duration: .3s;
  }
  .parameter-tpl {
    height: 4.12rem;
    margin-bottom: 2rem;
    animation-duration: .3s;
    p {
      color: #b8b8b8;
      font-size: .3rem;
      height: .94rem;
      line-height: .94rem;
      padding-left: .5rem;
      border-bottom: .02rem solid #ddd;
      span, del {
        height: 100%;
        width: 5.04rem;
        float: right;
        color: #4e4e4e;
      }
    }
  }
  .comment-tpl {
    height: 6.4rem;
    margin-bottom: 1.5rem;
    animation-duration: .3s;
    .comment-top {
      background: url("../img/clothes/comment.png") no-repeat center;
      background-size: 30%;
      height: 4rem;
      border-bottom: .02rem solid #ddd;
      p {
        text-align: center;
        line-height: 7.1rem;
        font-size: .26rem;
        color: #888;
      }
    }
    .comment-bottom {
      height: 2.3rem;
      p {
        color: @themecolor;
        font-size: .26rem;
        text-align: right;
        margin-right: .2rem;
        .fa {
          margin-right: .05rem;
        }
      }
    }
  }
}

/*product-tab end*/
.hidden {
  display: none;
}

footer {
  position: fixed;
  background-color: #fff;
  z-index: 1004;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 .2rem 0 .2rem;
  height: 1.5rem;
  border-top: .02rem solid rgb(226, 226, 226);
  .footer-add-to-cart, .footer-buy-now {
    display: inline-block;
    width: 3.4rem;
    height: 1rem;
    text-align: center;
    line-height: 1rem;
    font-size: .4rem;
    margin-top: .24rem;
  }
  .footer-add-to-cart {
    float: left;
    color: @themecolor;
    border: .04rem solid @themecolor;
  }
  .footer-buy-now {
    float: right;
    color: #fff;
    background: @themecolor;
  }
  .modal.bottom-sheet {
    height: 7.32rem;
    max-height: none;
  }
  .modal {
    overflow-y: visible;
    .top-info {
      position: relative;
      height: 2.2rem;
      padding-left: 3.2rem;
      .info-name, .info-price, .info-amount {
        font-size: .32rem;
        margin: 0;
        padding: 0;
        height: .48rem;
      }
      .info-name {
        color: #333;
        margin-top: .46rem;
      }
      .info-price {
        color: @themecolor;
        margin-bottom: .24rem;
      }
      .info-amount {
        font-size: .26rem;
        color: #666;
      }
      .fa {
        color: #666;
        display: block;
        position: absolute;
        top: -.2rem;
        right: .14rem;
        width: .38rem;
        height: .38rem;
        border: .02rem solid #666;
        border-radius: 50%;
        &::before {
          display: block;
          position: absolute;
          left: .09rem;
          top: 0.05rem;
        }
        font-size: .22rem;
      }
    }
    .productMallOptionImage {
      position: absolute;
      left: .24rem;
      top: -.44rem;
      width: 2.82rem;
      height: 2.82rem;
      background-color: #fff;
      border: .02rem solid #ececec;
      border-radius: .06rem;
      padding: .08rem;
      .productMallOptionImageContent {
        width: 2.62rem;
        height: 2.62rem;
        border: .02rem solid #ececec;
        border-radius: .06rem;
        img {
          display: block;
          width: 100%;
          vertical-align: middle;
          max-width: 100%;
        }
      }
    }
    .info-style {
      height: 1.3rem;
      p {
        margin-bottom: 0.08rem;
        height: .42rem;
        font-size: .32rem;
        margin-left: .3rem;
      }
      .styles {
        display: block;
        width: 1.24rem;
        height: .7rem;
        color: #ceced0;
        text-align: center;
        line-height: .7rem;
        border-radius: .06rem;
        margin-left: .3rem;
        border: .02rem dashed #ceced0;
        font-size: .24rem;
      }
    }
    .info-count {
      height: 1.32rem;
      overflow: hidden;
      span {
        float: left;
        height: 1.32rem;
        line-height: 1.32rem;
        font-size: .32rem;
        margin-left: .3rem;
      }
      .count-content {
        width: 3.8rem;
        height: .95rem;
        margin-top: .28rem;
        float: right;
        margin-right: .2rem;
        .minus, .plus {
          margin: 0;
          padding: 0;
          display: inline-block;
          width: .92rem;
          height: .87rem;
          line-height: .87rem;
          text-align: center;
          font-size: .3rem;
          border: .02rem solid rgb(226, 226, 226);
          border-radius: .06rem;
          .fa {
            display: block;
            width: .92rem;
            height: .87rem;
            line-height: .87rem;
          }
        }
        .minus {
          float: left;
          margin-left: .6rem;
          .fa {
            color: rgb(226, 226, 226);
          }
        }
        #productNum-desc {
          float: left;
          margin-left: .1rem;
          margin-right: .07rem;
          margin-top: -.01rem;
          outline: none;
          width: 1.125rem;
          height: .84rem;
          font-size: .4rem;
          text-align: center;
          border: .02rem solid rgb(198, 198, 198);
        }
        .plus {
          float: right;
          border: .02rem solid rgb(198, 198, 198);
        }
      }
    }
    .footer-info {
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 1.5rem;
      border-top: .02rem solid rgb(226, 226, 226);
      .sure {
        display: block;
        width: 7rem;
        height: 1rem;
        line-height: 1rem;
        font-size: .4rem;
        text-align: center;
        color: #fff;
        background-color: @themecolor;
        border: .02rem solid #ccc;
        border-radius: .04rem;
      }
    }
  }

}

/*footer end*/

